<template>
  <!-- 项目实施 - 点击列表按钮 二级详情弹窗 -->
  <div class="detail-modal">
    <div class="left fl" id="detail-modal-left">
      <div class="top">
        <div class="shortcut">
          <span>重要程度：</span>
          <el-select v-model="value" placeholder="请选择" style="width: 100px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-divider direction="vertical" style="margin: 0 16px 0 8px;"></el-divider>
          
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <i class="el-icon-document"></i><span>调用模板</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-collection"></i><span>存为模板</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-printer"></i><span>打印</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-setting"></i><span>更多设置</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="btns fl">
          <el-button type="primary" icon="el-icon-s-promotion" class="fl"> 发送 </el-button>
          <el-button icon="el-icon-s-management" class="fl"> 保存待发 </el-button>
        </div>
        <el-form label-width="60px" label-suffix=":" :model="formData" class="form">
          <el-form-item label="标题">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="流程">
            <el-input v-model="formData.flow">
              <el-button class="flow-btn" slot="append" type="text" @click="flowModal('1', true)"> 查看流程 </el-button>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="text-btns">
          <span class="green-text"> 上传附件 </span>
          <span>(0)</span>
          <span> (最大500M) </span>
          <i class="el-icon-question" style="color:#11a983;cursor: pointer;" title="可将文件拖拽至上传附件按钮附近上传"></i>
          <el-divider direction="vertical" style="margin: 0 16px 0 8px;"></el-divider>
          <span class="green-text" @click="showDocModal"> 关联文档 </span>
          <span>(0)</span>
        </div>
      </div>
      <div class="middle">
        <div class="content-bgi">
          <formName :text="formDetailTitle"></formName>
          <div class="form-content">
            <formPart v-for="(i, idx) in formDetail" :key="'list'+idx" :showListTitle="i.title ? true : false" :listTitle="i.title" :btns="i.btns" :tip="i.tip" ref="info1" :modalTitle="i.modalTitle" :formList="i.list"></formPart>
          </div>
        </div>
      </div>
      <div class="bottom">
        <el-input
          type="textarea"
          :rows="1"
          placeholder="请输入附言（2000字以内）"
          v-model="textarea">
        </el-input>
      </div>
    </div>
    <div class="right fr" id="detail-modal-right">
      <rightTab :tabList="tabList" :dataList="rTabData" actIdx="5" :menuType="menuType"></rightTab>
    </div>
    <!-- 点击查看流程 -->
    <el-dialog title="查看流程图" class="flow-modal" :visible.sync="flowModalState1" @close="hideFlowModal('1')" width="1200px" style="margin-top:6vh;" :close-on-click-modal="false">
      <div class="btns">
        <el-button type="primary" plain @click="flowModal('2', true)"> 流程预测 </el-button>
        <el-divider direction="vertical"></el-divider>
        <span> 泳道 </span>
        <el-switch v-model="switchBtn" active-color="#11a983">
        </el-switch>
      </div>
      <div class="flow-modal-bgi">
        <img class="flow-bgi" :src="modalImgs.img1" height="250px"/>
        <img v-if="switchBtn" class="flow-bgi-border" :src="modalImgs.img2" height="250px"/>
      </div>
    </el-dialog>
    <!-- 点击流程预测 -->
    <el-dialog title="流程预测" class="flow-modal" :visible.sync="flowModalState2" @close="hideFlowModal('2')" width="500px" style="margin-top:0;" :close-on-click-modal="false" >
      <div class="flow-modal-bgi">
        <content5 ref="content5" tabTitle="流程预测" :info="modalImgs.img3"></content5>
      </div>
    </el-dialog>
    <!-- 点击关联文档 -->
    <el-dialog title="关联文档" class="document-modal" :visible.sync="docModalState" @close="closeDocModal" width="90%" style="margin-top:0;" :close-on-click-modal="false" @before-close="beforeClose">
      <el-tabs class="docs" tab-position="top" v-model="docTopIdx" @tab-click="docTabChange">
        <el-tab-pane v-for="(i,idx) in docTabs" :key="idx" :name="i.v">
          <div slot="label">{{i.l}}</div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="docTopIdx == '0'" class="doc-tab tab1">
        <docTab1 ref="docTab1"></docTab1>
      </div>
      <div v-if="docTopIdx == '1'" class="doc-tab tab2">
        <docTab2 ref="docTab2"></docTab2>
      </div>
      <div v-if="docTopIdx == '2'" class="doc-tab tab3">
        <docTab3 ref="docTab3"></docTab3>
      </div>
      <div v-if="docTopIdx == '3'" class="doc-tab tab4">
        <docTab4 ref="docTab4"></docTab4>
      </div>
      
      <span slot="footer" class="flow-modal-footer">
        <el-button @click="closeDocModal">取 消</el-button>
        <el-button type="primary" @click="closeDocModal">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import rightTab from "../components/rightTab";
import content5 from "../components/rightTabs/content5";
import docTab1 from "../components/docContent/synergy";
import docTab2 from "../components/docContent/official";
import docTab3 from "../components/docContent/docCenter";
import docTab4 from "../components/docContent/meeting";
import formName from '../components/formName';
import formPart from '../components/formPart';
export default {
  name: "detailModal",
  components: { rightTab, content5, docTab1, docTab2, docTab3, docTab4, formName, formPart},
  data() {
    return {
      value: "0",
      docTopIdx: '0',
      docTabs: [
        {l: '协同', v: '0'},
        {l: '公文', v: '1'},
        {l: '文档中心', v: '2'},
        {l: '会议', v: '3'}
      ],
      options: [
        {
          value: '0',
          label: '普通'
        }, {
          value: '1',
          label: '重要'
        }, {
          value: '2',
          label: '非常重要'
        }
      ],
      flowModalState1: false,
      flowModalState2: false,
      switchBtn: true,
      docModalState: false,
      textarea: "",
      // rTabData: [
        //   {
        //     label: '智能校验',
        //     info: {
        //       img: require('../../images/znjy-plan-bg.png')
        //     }
        //   }, {
        //     label: '流程预测',
        //     info: [{
        //   num1: '0',
        //   num2: '1分',
        //   dateTime: '2024-08-08 09:17:05',
        //   status: 'finished',
        //   list: [{
        //     name: '凌焘',
        //     role: '核定',
        //     opinion: '同意',
        //     handler: '凌焘',
        //     handleTime: '2024-08-08 09:24:01',
        //     investTime: '1分'
        //   }, {
        //     name: '朱冠',
        //     role: '协同',
        //     opinion: '已阅',
        //     handler: '凌焘',
        //     handleTime: '',
        //     handleTime: '2024-08-08 09:24:09',
        //     investTime: '8分'
        //   }, {
        //     name: '凌焘',
        //     role: '协同',
        //     opinion: '',
        //     handler: '凌焘',
        //     handleTime: '',
        //     investTime: ''
        //   }]
        // }]
        //   }, {
        //     label: '相关数据',
        //     info: {
        //       list: [
        //         {
        //           text: `蚂蚁森林工作计划-2024-04-25`,
        //           img: require('../../images/icon-doc.png')
        //         }, {
        //           text: `蚂蚁森林工作计划-2024-04-25`,
        //           img: require('../../images/icon-doc.png')
        //         }, {
        //           text: `蚂蚁森林工作计划-2024-04-25`,
        //           img: require('../../images/icon-doc.png')
        //         }, {
        //           text: `蚂蚁森林工作计划-2024-04-25`,
        //           img: require('../../images/icon-doc.png')
        //         }
        //       ]
        //     }
        //   }
      // ]
    }
  },
  props: {
    // 右侧显示 Tab 列表
    tabList: {
      type: Array,
      default: () => []
    },
    // 标题、流程表单回显
    formData: {
      type: Object,
      default: () => {}
    },
    formDetailTitle: {
      type: String,
      default: () => ''
    },
    // 内容表单回显
    formDetail: {
      type: Array,
      default: () => []
    },
    // 流程相关图片
    modalImgs: {
      type: Object,
      default: () => []
    },
    // 右侧标签数据
    rTabData: {
      type: Array,
      default: () => []
    },
    menuType: {
      type: String,
      default: () => ''
    }
  },
  watch: {
    pic(n){},
    modalImg(n){},
  },
  mounted() {
    this.resize();
    window.addEventListener('resize', this.resize);
  },
  methods: {
    /**
     * @author Wrl
     * level 1查看流程图 2流程预测
     */
    flowModal(level, val) {
      if(level == '1') {
        this.flowModalState1 = val;
      } else if(level == '2') {
        this.flowModalState2 = val;
      }
      setTimeout(() => {
        document.querySelector('.v-modal').style.display = "none";
      }, 500)
    },
    /**
     * @author Wrl
     * 关闭流程预测弹窗
     */
    hideFlowModal(level) {
      if(level == '1') {
        this.flowModalState1 = false;
      } else if(level == '2') {
        this.flowModalState2 = false;
      }
    },
    /**
     * @author Wrl
     * 关闭前的回调
     */
    beforeClose() {
      this.$refs.docTab1.refresh();
      setTimeout(() => {
        this.docTopIdx = '0';
        this.docModalState = false;
      }, 100)
    },
    /**
     * @author Wrl
     * 动态获取高度
     */
    resize() {
      setTimeout(() => {
        let detailModalH = document.querySelector('.detail-modal').offsetHeight;
        let leftH = document.getElementById('detail-modal-left').offsetHeight;
        if(leftH) {
          document.getElementById('detail-modal-right').style.height = `${leftH}px`;
        }
      }, 500)
    },
    /**
     * @author Wrl
     * 点击关联文档Tab
     */
    docTabChange(tab, event) {},
    /**
     * @author Wrl
     * 打开关联文档弹窗
     */
    showDocModal(e) {
      this.docModalState = true;
      setTimeout(() => {
        document.querySelector('.v-modal').style.display = "none";
      }, 500)
    },
    /**
     * @author Wrl
     * 关闭关联文档弹窗
     */
    closeDocModal() {
      this.docTopIdx = '0';
      this.docModalState = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail-modal {
    box-sizing: border-box;
    overflow: overlay;
    height: 596px;
    .fl {
      float: left;
    }
    .fr {
      float: right;
    }
    .top,.middle{
      background: #ffffff;
      border-radius: 4px;
      position: relative;
    }
    .right  {
      border-radius: 4px;
      position: relative;
    }
    .left {
      width: 844px;
      .top {
        padding: 8px 16px;
        overflow: hidden;
        .shortcut {
          position: absolute;
          top: 8px;
          right: 16px;
          display: inline-flex;
          align-items: center;
          .el-dropdown-link {
            cursor: pointer;
          }
          ::v-deep {
            .el-input__inner {
              border: none;
            }
          }
        }
        .form {
          margin-top: 50px;
          width: 100%;
          ::v-deep {
            .el-form-item {
              margin-bottom: 8px;
            }
            .el-input-group__append {
              background: #ffffff;
            }
          }
          .flow-btn {
            color: #11a983;
            padding: 5px 10px;
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
      .middle {
        margin-top: 5px;
        overflow: overlay;
        padding: 30px 16px 20px;
        height: 380px;
        &::-webkit-scrollbar {
          width: 0;
          height: 0;
        }
        .img-title {
          color: #ffffff;
          background: #11a983;
          text-align: center;
          height: 30px;
          line-height: 30px;
          width: 300px;
          position: absolute;
          top: 46px;
          font-size: 22px;
          font-weight: bold;
          left: 50%;
          font-family: Microsoft Yahei;
          margin-left: -150px;
          z-index: 1;
        }
        .content-bgi {
          width: 90%;
          margin-left: -45%;
          // margin-left: -320px;
          // width: 640px;
          position: absolute;
          top: 35px;
          left: 50%;
          .form-content {
            margin: 0 0 30px;
            .form-part {
              ::v-deep {
                .el-card__body {
                  padding: 10px 10px 0;
                }
              }
            }
          }
        }
      }
      .bottom {
        ::v-deep {
          .el-textarea {
            width: 100%;
            margin: 5px auto 0;
          }
        }
      }
    }
    .right {
      width: 340px;
      height: 100%;
      // height: 595px;
      // background: #ffffff;
      ::v-deep {
        .el-tabs--right .el-tabs__header.is-right {
          margin-left: 0;
        }
      }
    }
    .green-text {
      cursor: pointer;
      color: #11a983;
    }
    .flow-modal {
      padding: 20px;
      .btns {
        padding: 0 20px;
        text-align: right;
      }
      .flow-modal-bgi {
        position: relative;
        display: block;
        height: 400px;
        overflow: overlay;
        .flow-bgi {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 0;
        }
        .flow-bgi-border {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }
        &.bg2 {
          margin: 0 auto 20px;
        }
      }
      .docs {
        padding: 0 16px;
      }
      .doc-tab {
        padding: 0 16px;
      }
    }
    
    ::v-deep {
      .flow-modal .el-dialog__body {
        background: #ffffff !important;
      }
      .document-modal .el-dialog__body {
        background: #ffffff !important;
        padding: 10px 20px !important;
      }
      .form-modal-dialog .el-dialog__body {
        padding: 5px;
        background: #eeeeee;
      }
    }
  }
</style>